<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <!-- <router-link to="/xqda"> -->
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="fanhui_btn" />
        <!-- <div class="btn-change" @click="jumpDepartment">
          <img src="@/assets/images/img-switch.png" class="img"/>
          <span style="margin-left: 5px">{{ chooseId === 0 ? '街道' : '部门' }}</span>
        </div> -->
        <div>隐患整治</div>
          <div class="btn-search" @click="search">
          <img
            src="@/assets/images/big.png"/>
        </div>
      </div>
    </header>
    <div class="main">
      <div class="main_head">
         <span class="main_head_font">隐患总数{{totalCount}}个</span>
            <div class="column-box-title">
          <img src="@/assets/images/appa_r.png" class="img img-ts" @click="clickDate(1)">
          <div class="column-box-title" @click="show === false ? show = true : show = false">
            <span style="margin-left: 5px" :style="timeType === 1 ? 'margin-right: 5px' : ''">{{ years }}</span>
            <span v-if="timeType === 2" :style="timeType === 2 ? 'margin-right: 5px' : ''">.{{ year }}</span>
            <img src="@/assets/images/app_x.png" class="imgs">
          </div>
          <img src="@/assets/images/appa_r.png" class="img" @click="clickDate(2)">
        </div>
      </div>
       <div class="titles-modal" v-if="show" @click="show = false">
        <div class="titles-box">
          <div class="titles-tu"></div>
          <div class="titles-text" @click="clickBounceds(1)">年</div>
          <div class="titles-text" @click="clickBounceds(2)">月</div>
        </div>
      </div>
      <div class="main_center">
        <div class="main_center_item">
          <div class="lefttomm">
            <div class="su_prent" @click="toTypeList(data_bzt[0].name,2)" data-type="1">
              <span class="su su_1"></span>
              <span class="font_42">{{data_bzt[0].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[0].value}}%({{data_bzt[0].cunt}}个)</div>
          </div>
         <div class="lefttomm">
            <div class="su_prent" @click="toTypeList(data_bzt[1].name,1)">
              <span class="su su_3"></span>
              <span class="font_42">{{data_bzt[1].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[1].value}}%({{data_bzt[1].cunt}}个)</div>
          </div>
           <div class="lefttomm">
            <div class="su_prent" @click="toTypeList(data_bzt[4].name,5)">
              <span class="su su_8"></span>
              <span class="font_42">{{data_bzt[4].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[4].value}}%({{data_bzt[4].cunt}}个)</div>
          </div>
        </div>
        <div id="bingtu" ref="bingtu"></div>
        <div class="main_center_item">
          <div>
            <div class="su_prent" @click="toTypeList(data_bzt[2].name,3)">
              <span class="su su_2"></span>
              <span class="font_42">{{data_bzt[2].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[2].value}}%({{data_bzt[2].cunt}}个)</div>
          </div>
            <div>
            <div class="su_prent" @click="toTypeList(data_bzt[3].name,4)">
              <span class="su su_9"></span>
              <span class="font_42">{{data_bzt[3].name}}</span>
            </div>
            <div class="font_36_huise">{{data_bzt[3].value}}%({{data_bzt[3].cunt}}个)</div>
          </div>

        </div>


      </div>
      <div class="hr_s">
        <div class="hr"></div>
      </div>
      <div class="main_fool">
        <!-- 左边统计图 -->
        <div>
          <div class="main_fool_title">
            <span>隐患走势</span>
            <div class="main_fool_title_right">
              <div class="yzg_icon">
                <div></div>
                <span>&nbsp;隐患总数</span>
              </div>
              <div class="yh_icon">
                <div></div>
                <span>&nbsp;未整改数</span>
              </div>
            </div>
          </div>
          <div class="yhzs_prent">
            <div id="zz_tu" ref="zz_tu"></div>
          </div>
        </div>
        <div class="main_fool_su"></div>
        <div>
          <div class="main_fool_title">隐患统计</div>
          <div class="tongji">
            <div id="bingtu" ref="bingtu2"></div>
            <div class="main_title_seif" style="display: block;width:50%">
              <div>
                <div class="su_prent" @click="toTypeLists(data_bzts[0].name,1)">
                  <span class="su su_5"></span>
                  <span class="font_43">{{data_bzts[0].name}}</span>
                </div>
                <div class="font_shuzi">{{data_bzts[0].value}}%({{data_bzts[0].cunt}}个)</div>
              </div>

              <div>
                <div class="su_prent" @click="toTypeLists(data_bzts[1].name,2)">
                  <span class="su su_6"></span>
                  <span class="font_43">{{data_bzts[1].name}}</span>
                </div>
                <div class="font_shuzi">{{data_bzts[1].value}}%({{data_bzts[1].cunt}}个)</div>
              </div>

              <div>
                <div class="su_prent" @click="toTypeLists(data_bzts[2].name,3)">
                  <span class="su su_7"></span>
                  <span class="font_43">{{data_bzts[2].name}}</span>
                </div>
                <div class="font_shuzi">{{data_bzts[2].value}}%({{data_bzts[2].cunt}}个)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hr_s">
        <div class="hr"></div>
      </div>

             <div>
        <div class="main_footer">
          <div class="main-list">
            <div class="main-wh">社区</div>
            <div class="main-wh sd">隐患数</div>
            <div class="main-wh sd">已整改</div>
            <div class="main-wh sd">落实管控</div>
            <div class="main-wh sd">未整改</div>
          </div>
        </div>

        <div class="index">
          <div class="main-list">
            <div class="main-wh">合计</div>
         
             <div class="main-wh wh-col">{{this.total.yhNum}}</div>
            <div class="main-wh wh-col">{{this.total.yzg}}</div>
            <div class="main-wh wh-col">{{this.total.lsgk}}</div>
            <div class="main-wh wh-col">{{this.total.wzg}}</div>
          </div>
          <!-- <div class="main-list" id="yc">
            <div class="main-wh">街道本级</div>
            <div class="main-wh wh-col" @click="jdbj(1)">{{this.btnji.numberOfHidden}}</div>
            <div class="main-wh wh-col" @click="jdbj(2)">{{this.btnji.hasTheRectification}}</div>
            <div class="main-wh wh-col" @click="jdbj(3)">{{this.btnji.supervise}}</div>
            <div class="main-wh wh-col" @click="jdbj(4)">{{this.btnji.notCorrected}}</div>
          </div> -->
          <div
            class="main-list"
            v-for="(item, index) in dataList"
            :key="index"
            :finished="finished"
          >
          
          <div class="main-wh">{{item.name}}</div>
            <div class="main-wh wh-col" @click="btn(item.id,1,item.name)">{{item.yhNum}}</div>
            <div class="main-wh wh-col" @click="btn(item.id,2,item.name)">{{item.yzg}}</div>
            <div class="main-wh wh-col" @click="btn(item.id,3,item.name)">{{item.lsgk}}</div>
            <div class="main-wh wh-col" @click="btn(item.id,4,item.name)">{{item.wzg}}</div>
          </div>
        </div>
      </div>



        </div>
        <Tabbar></Tabbar>
    </div>
</template>
<script>
import utils from "../../assets/js/utils.js";
import { Dialog } from "vant";
import Tabbar from "../tabbar.vue";
import echarts from "echarts";
export default {
  name: "yhzz_btn2",
  data() {
    return {
      menuFlag: false,
      userId:null,
      items: [],
      data_bzt: [
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" }
      ],
      data_bzts: [
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" }
      ],
      data_zxt: [],
      data_zxt_month: [],
      data_zxt_value: [],
      data_zzt: [],
      dataList: [],
      data_zzt_month: [],
      data_zzt_value: [],
      data_zzt_value1: [],
      list_id: "",
      count_hu: null,
      ym_title: "渝中区住改非",
      is_jd: false,
      list_path_canshu: [],
      ct_cunt: 0,
      sehqu_id: null,
       total: "",
      finished: false,
      types: null,
      dwId: "",
      lev: "",
      time:'',
      rows: "",
      jdbj:null,
       show: false,
       year: new Date().getMonth() + 1,
      years: new Date().getUTCFullYear(),
       timeType: 1,
       datax: null,
       totalCount:''
    };
  },
  components: {
    Tabbar
  },
  // beforeRouteLeave(to, from, next) {
  //     //设置路由的 meta
  //     // if(!(to.path=='/yhzz_detail')){
  //     //   localStorage.removeItem("list_scrollTop");
  //     // }
  //     next();
  // },
  // //进入该页面时，用之前保存的滚动位置赋值
  // beforeRouteEnter (to, from, next) {
  //     next(vm => {
  //       vm.next();
  //     })
  // },

  methods: {
    next(){
var list_scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
        if(list_scrollTop||list_scrollTop===0){
          $('.main').animate({scrollTop: list_scrollTop}, 0);
        }else{
          this.axios
            .get(
              `${this.$global_msg.Url.host}/taskAssign/isPostOrGet?userId=${this.userId}`
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 200) {
                this.rows = res.data.rows;
                console.log(res.data.rows);

                this.queryAll();
              } else {
                this.$toast(res.data.msg);
              }
            }).catch(error => {
              this.$terminal._error(error);
            });

          this.jdbj=localStorage.getItem("yhzz_params") ? JSON.parse(localStorage.getItem("yhzz_params")) : {};
          this.userId = localStorage.getItem("userId"); //获取访问id
          var mcid = parseInt(this.$route.query.userid);
          var types = parseInt(this.$route.query.type);
          this.dwId = mcid;
          this.thpes = types;

          this.onRefresh();
         }
        localStorage.removeItem("list_scrollTop");
    },
   
    fanhui_btn() {
      
      this.$router.back()
    },
      search(){
this.$router.push({ path: "/yhzz_search"});
    },
        // 选择年月
     clickBounceds (id) {
      this.show = false;
      this.count = 0;
      switch (id) {
        case 1:
          this.timeType = 1;
           this.saveTime();
          break;
        case 2:
          this.timeType = 2;
           this.saveTime();
          break;
      }
    this.queryAll();
    },
      //  减少/增加月份或年份
    clickDate (id) {
      let that = this;
      if (id === 1) {
        switch (that.timeType) {
          case 1:
            if (that.years > 2015) {
              that.years--;
               that.queryAll();
            }
            break;
          case 2:
            if (that.years > 2015) {
              that.year--;
              if (that.year <= 0) {
                that.years--;
                that.year = 12;
              }
              
             that.queryAll();
            } else {
              if (this.year > 1) {
                that.year--;
               
               that.queryAll();
              }
            }
            break;
        }
      } else {
        switch (that.timeType) {
          case 1:
            if (that.years < new Date().getUTCFullYear()) {
              that.years++;
           that.queryAll();
            }
            break;
          case 2:
            if (that.years < new Date().getUTCFullYear()) {
              if (that.year >= 12) {
                that.year++;
                that.years++;
                that.year = 1;
              } else {
                that.year++;
              }
              that.queryAll();
            } else {
              if (that.year !== new Date().getMonth() + 1) {
                that.year++;
               //that.queryAll();
               that.queryAll();
              }
            }
            break;
        }
      }
    },
       //  存日期
      saveTime() {
  //     if(this.timeType == 1){
  //  let time = {
  // //  year :this.year,
  //       years: this.years,
  //       chooseId: this.chooseId,
  //       timeType: this.timeType,
  //     };
  //     sessionStorage.setItem("time", JSON.stringify(time));
  //     }else if(this.timeType !==1 ){
         let time = {
    
        years: this.years,
        chooseId: this.chooseId,
        timeType: this.timeType,
      };
       if (this.timeType !== 1) {
  time.year=this.year;
       }
      sessionStorage.setItem("time", JSON.stringify(time));
   
   
    },
  //  第一
    quanxain() {
      this.axios
        .get(
          `${this.$global_msg.Url.host}/taskAssign/isPostOrGet?userId=${this.userId}`
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 200) {
            this.rows = res.data.rows;
            console.log(res.data.rows);
          } else {
            this.$toast(res.data.msg);
          }
        }).catch(error => {
          this.$terminal._error(error);
        });
    },
    info(params) {
      //获取数据
      try {
        // plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log("plus问题");
      }

      if (this.rows == 0 || this.rows == 1|| this.rows == 3|| this.rows == 4) {

        if(this.rows ==1&&this.jdbj.from=="/yhzz_keshi"||this.rows ==0&&this.jdbj.from=="/yhzz_keshi"){
        this.axios
          .get(
           `${this.$global_msg.Url.host}/remediaHiddenDangers/archivesType`,{params}
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.totalCount=res.data.rows.totalCount
              console.log(res.data.rows.construction);

              let a = [];

              // 饼状图
              a.push({
                name: "建筑物",
                value: res.data.rows.construction,
                cunt: res.data.rows.constructionCount
              });
              a.push({
                name: "九小门店",
                value: res.data.rows.nineSmallStores,
                cunt: res.data.rows.nineSmallStoresCount
              });
              a.push({
                name: "住改非",
                value: res.data.rows.zgf,
                cunt: res.data.rows.zgfCount
              });
            a.push({
              name: "企业",
              value: res.data.rows.company,
              cunt: res.data.rows.companyCount
            });
             a.push({
              name: "其他",
              value: res.data.rows.other,
              cunt: res.data.rows.otherCount
            });
              this.data_bzt = a;
              console.log(this.data_bzt);

              this.bingzhangtu();


              this.ym_title = "渝中区住改非";
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
            } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
      }else{
        this.axios
          .get(
            `${this.$global_msg.Url.host}/remediaHiddenDangers/archivesType`,{params}
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.totalCount=res.data.rows.totalCount
              console.log(res.data.rows.construction);

              let a = [];

              // 饼状图
              a.push({
                name: "建筑物",
                value: res.data.rows.construction,
                cunt: res.data.rows.constructionCount
              });
              a.push({
                name: "九小门店",
                value: res.data.rows.nineSmallStores,
                cunt: res.data.rows.nineSmallStoresCount
              });
              a.push({
                name: "住改非",
                value: res.data.rows.zgf,
                cunt: res.data.rows.zgfCount
              });
            a.push({
              name: "企业",
              value: res.data.rows.company,
              cunt: res.data.rows.companyCount
            });
             a.push({
              name: "其他",
              value: res.data.rows.other,
              cunt: res.data.rows.otherCount
            });
              this.data_bzt = a;
              console.log(this.data_bzt);
              this.bingzhangtu();

              this.ym_title = "渝中区住改非";
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
            } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
      }

      }else if(this.rows ==2){
        this.axios
          .get(
            `${this.$global_msg.Url.host}/remediaHiddenDangers/archivesType?`,{params}
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.totalCount=res.data.rows.totalCount
              console.log(res.data.rows.construction);

              let a = [];

              // 饼状图
              a.push({
                name: "建筑物",
                value: res.data.rows.construction,
                cunt: res.data.rows.constructionCount
              });
              a.push({
                name: "九小门店",
                value: res.data.rows.nineSmallStores,
                cunt: res.data.rows.nineSmallStoresCount
              });
              a.push({
                name: "住改非",
                value: res.data.rows.zgf,
                cunt: res.data.rows.zgfCount
              });
            a.push({
              name: "企业",
              value: res.data.rows.company,
              cunt: res.data.rows.companyCount
            });
             a.push({
              name: "其他",
              value: res.data.rows.other,
              cunt: res.data.rows.otherCount
            });
              this.data_bzt = a;
              console.log(this.data_bzt);

              this.bingzhangtu();


              this.ym_title = "渝中区住改非";
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
            } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
      }
    },
    // 第二个饼状图
    info2(params) {
      if (this.rows == 0 || this.rows == 1|| this.rows == 3|| this.rows == 4) {
        if(this.rows ==1&&this.jdbj.from=="/yhzz_keshi"||this.rows ==0&&this.jdbj.from=="/yhzz_keshi"){

        this.axios
          .get(
              `${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTypeCount`,{params}
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              // console.log(res.data.rows.construction)

              let a = [];

              // 饼状图
              a.push({
                name: "限期整改",
                value: res.data.rows.timeLimit,
                cunt: res.data.rows.timeLimitNumber
              });
              a.push({
                name: "即查即改",
                value: res.data.rows.iETheChange,
                cunt: res.data.rows.iETheChangeNumber
              });
              a.push({
                name: "落实管控",
                value: res.data.rows.supervise,
                cunt: res.data.rows.superviseNumber
              });

              this.data_bzts = a;
              console.log(this.data_bzts);

              this.bingzhangtu2();


              this.ym_title = "渝中区住改非";
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
            } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
        }else{
          this.axios
          .get(
              `${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTypeCount`,{params}
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              // console.log(res.data.rows.construction)

              let a = [];

              // 饼状图
              a.push({
                name: "限期整改",
                value: res.data.rows.timeLimit,
                cunt: res.data.rows.timeLimitNumber
              });
              a.push({
                name: "即查即改",
                value: res.data.rows.iETheChange,
                cunt: res.data.rows.iETheChangeNumber
              });
              a.push({
                name: "落实管控",
                value: res.data.rows.supervise,
                cunt: res.data.rows.superviseNumber
              });

              this.data_bzts = a;
              console.log(this.data_bzts);

              this.bingzhangtu2();


              this.ym_title = "渝中区住改非";
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
            } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
        }


      } else if(this.rows==2){
        this.axios
          .get(
             `${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTypeCount`,{params}
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              // console.log(res.data.rows.construction)

              let a = [];

              // 饼状图
              a.push({
                name: "限期整改",
                value: res.data.rows.timeLimit,
                cunt: res.data.rows.timeLimitNumber
              });
              a.push({
                name: "即查即改",
                value: res.data.rows.iETheChange,
                cunt: res.data.rows.iETheChangeNumber
              });
              a.push({
                name: "落实管控",
                value: res.data.rows.supervise,
                cunt: res.data.rows.superviseNumber
              });

              this.data_bzts = a;
              console.log(this.data_bzts);

              this.bingzhangtu2();


              this.ym_title = "渝中区住改非";
              try {
                plus.nativeUI.closeWaiting();
              } catch (e) {
                console.log("plus问题");
              }
            } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
      }
      //  else if(this.rows==3){
      //   this.axios
      //     .get(
      //       `${this.$global_msg.Url.host}/selectStatistics?userId=${this.userId}`
      //     )
      //     .then(res => {
      //       console.log(res);
      //      if (res.data.code == 200) {
      //         // console.log(res.data.rows.construction)

      //         let a = [];

      //         // 饼状图
      //         a.push({
      //           name: "限期",
      //           value: res.data.rows.timeLimit,
      //           cunt: res.data.rows.timeLimitNumber
      //         });
      //         a.push({
      //           name: "即查即改",
      //           value: res.data.rows.iETheChange,
      //           cunt: res.data.rows.iETheChangeNumber
      //         });
      //         a.push({
      //           name: "落实管控",
      //           value: res.data.rows.supervise,
      //           cunt: res.data.rows.superviseNumber
      //         });

      //         this.data_bzts = a;
      //         console.log(this.data_bzts);

      //         this.bingzhangtu2();


      //         this.ym_title = "渝中区住改非";
      //         try {
      //           plus.nativeUI.closeWaiting();
      //         } catch (e) {
      //           console.log("plus问题");
      //         }
      //       } else {
      //         // this.$toast("服务器数据异常!");
      //       }
      //     });
      // }
    },

    // 柱状图
    zhuzhuang(params) {
      if (this.rows == 0 || this.rows == 1|| this.rows == 3|| this.rows == 4) {
        if(this.rows ==1&&this.jdbj.from=="/yhzz_keshi"||this.rows ==0&&this.jdbj.from=="/yhzz_keshi"){
          this.axios
          .get(
             `${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTrend`,{params}
          )
          .then(res => {

              console.log("隐患柱状图：",res)
                            console.log(res.data.rows)
            if (res.data.code == 200) {
            this.data_zxt_month = [];
            this.data_zxt_value = [];
            this.data_zzt_month = [];
            this.data_zzt_value = [];
            this.data_zzt_value1 = [];

            if(res.data.rows.yhTotal.length>12){//日
              this.datax=[]
              res.data.rows.yhTotal.forEach(element => {
                  this.datax.push(element.time+"日")
              });
            }else{//月
               this.datax = [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ];
            }   




            // 柱状图
            var yh = res.data.rows.yhTotal; //隐患
            var zg = res.data.rows.notRectify; //整改
            yh.forEach((element) => {
              element["value"] = element.num;
            });
            zg.forEach((element) => {
              element["value"] = element.num;
            });
            this.data_zzt_value = yh;
            this.data_zzt_value1 = zg;

            this.zhuzhuangtu();
          }else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
        }else{
          this.axios
          .get(
           `${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTrend`,{params}
          )
          .then(res => {

              console.log("隐患柱状图：",res)
                            console.log(res.data.rows)
            if (res.data.code == 200) {
            this.data_zxt_month = [];
            this.data_zxt_value = [];
            this.data_zzt_month = [];
            this.data_zzt_value = [];
            this.data_zzt_value1 = [];

            if(res.data.rows.yhTotal.length>12){//日
              this.datax=[]
              res.data.rows.yhTotal.forEach(element => {
                  this.datax.push(element.time+"日")
              });
            }else{//月
               this.datax = [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ];
            }   




            // 柱状图
            var yh = res.data.rows.yhTotal; //隐患
            var zg = res.data.rows.notRectify; //整改
            yh.forEach((element) => {
              element["value"] = element.num;
            });
            zg.forEach((element) => {
              element["value"] = element.num;
            });
            this.data_zzt_value = yh;
            this.data_zzt_value1 = zg;

            this.zhuzhuangtu();
          } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
        }

      } else if(this.rows==2){
        this.axios
          .get(
            `${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTrend`,{params}
          )
          .then(res => {
            console.log(res);
            console.log(res.data.rows);
           if (res.data.code == 200) {
            this.data_zxt_month = [];
            this.data_zxt_value = [];
            this.data_zzt_month = [];
            this.data_zzt_value = [];
            this.data_zzt_value1 = [];

            if(res.data.rows.yhTotal.length>12){//日
              this.datax=[]
              res.data.rows.yhTotal.forEach(element => {
                  this.datax.push(element.time+"日")
              });
            }else{//月
               this.datax = [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ];
            }   




            // 柱状图
            var yh = res.data.rows.yhTotal; //隐患
            var zg = res.data.rows.notRectify; //整改
            yh.forEach((element) => {
              element["value"] = element.num;
            });
            zg.forEach((element) => {
              element["value"] = element.num;
            });
            this.data_zzt_value = yh;
            this.data_zzt_value1 = zg;

            this.zhuzhuangtu();
          } else {
              this.$toast("服务器数据异常!");
            }
          }).catch(error => {
            this.$terminal._error(error);
          });
     }

    },


    liebiao2(params) {
      var types = localStorage.getItem("yhzz")
        ? JSON.parse(localStorage.getItem("yhzz"))
        : {};
      console.log(types.type);
      this.types = types.type;
      this.dwId = types.shequid;
      this.axios
        .get(
          `${this.$global_msg.Url.host}/taskAssign/isPostOrGet?userId=${this.userId}`
        )
        .then(res => {
          if (this.rows== 2) {
            this.axios
              .get(
                `${this.$global_msg.Url.host}/remediaHiddenDangers/dwList`,{params}
              )
              .then(res => {
                console.log("列表",res)
                if (res.data.code == 200) {
                  this.dataList = res.data.rows.list;
                    this.total = res.data.rows.total;
                } else {
                  this.$toast("服务器数据异常!");
                }
              }).catch(error => {
                this.$terminal._error(error);
              });
          }
           if(this.rows==0||this.rows==1||this.rows==3||this.rows==4){
            if(this.rows ==1&&this.jdbj.from=="/yhzz_keshi"||this.rows ==0&&this.jdbj.from=="/yhzz_keshi"||this.rows ==3&&this.jdbj.from=="/yhzz_keshi"||this.rows ==4&&this.jdbj.from=="/yhzz_keshi"){
              this.axios
              .get(
               `${this.$global_msg.Url.host}/remediaHiddenDangers/dwList`,{params}
              )
              .then(res => {
                console.log("列表",res)
                if (res.data.code == 200) {
                  this.dataList = res.data.rows.list;
                   this.total = res.data.rows.total;
                } else {
                  this.$toast("服务器数据异常!");
                }
              }).catch(error => {
                this.$terminal._error(error);
              });
            }else{
              this.axios
              .get(
                `${this.$global_msg.Url.host}/remediaHiddenDangers/dwList`,{params}
              )
              .then(res => {
                console.log("列表",res)
                if (res.data.code == 200) {
                  this.dataList = res.data.rows.list;
                   this.total = res.data.rows.total;
                } else {
                  this.$toast("服务器数据异常!");
                }
              }).catch(error => {
                this.$terminal._error(error);
              });
            }
            }


        }).catch(error => {
          this.$terminal._error(error);
        });
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据

    },

    getTime(time) {
      return utils.dateFormat(time, "MM-DD");
    },
      // 社区点击
    btn(i, num, e, item) {
        this.saveTime();
      console.log(e);
       sessionStorage.setItem("jdnum",num)
       sessionStorage.setItem("jdbm",2)
      sessionStorage.setItem("shequname",e)
      var yhzz_params = {
        shequid: i,
        type: num,
      };

      localStorage.setItem("yhzz", JSON.stringify(yhzz_params));

      var types = localStorage.getItem("yhzz_p")
        ? JSON.parse(localStorage.getItem("yhzz_p"))
        : {};
      var types = localStorage.getItem("yhzz")
        ? JSON.parse(localStorage.getItem("yhzz"))
        : {};

      if (types.type == 1) {
        var yhzz_params = {
          cx_type: "xqda",
          type: num,
          from: "/yhzz_btn1",
          
        };

        localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
       if(e=="社区本级"){
  this.$router.push({ path: "/yhzz_keshi", query: { userid: i } });
}else{

this.$router.push({ path: "/yhzz_keshi", query: { userid: i } });
}
       
      } else {
        var yhzz_params = {
          cx_type: "yhzz",
          type: num,
          sqid: i,
          from: "/yhzz_btn1",
        };

        localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
         if(e=="社区本级"){
  this.$router.push({ path: "/yhzz_keshi", query: { userid: i } });
}else{
  // sessionStorage.removeItem("jdnum")
this.$router.push({ path: "/yhzz_keshi", query: { userid: i } });
}
        // 
      }
    },
    
    toTypeList(e, num, name) {
       this.saveTime();
       var shequ = localStorage.getItem("yhzz")
        ? JSON.parse(localStorage.getItem("yhzz"))
        : {};
      var yhzz_params = {
        cx_type: "xqda",
        from: "yhzz_btn2",
        type: num,
        sqid:shequ.shequid
      };
localStorage.setItem("btn",2)
      localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
      this.$router.push("/yhzz_list");
    },

    toTypeLists(e, num, name) {
       this.saveTime();
       localStorage.setItem("btn",2)
       var shequ = localStorage.getItem("yhzz")
        ? JSON.parse(localStorage.getItem("yhzz"))
        : {};
      var yhzz_params = {
        cx_type: "yhlb",
        from: "yhzz_btn2",
        type: num,
       sqid:shequ.shequid
      };

      localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
      this.$router.push("/yhzz_list");
    },

    bingzhangtu() {
      //饼状图
      // var myChar = echarts.init(document.getElementById("bingtu"));
      let a = this.$refs.bingtu;
      if (a) {
        let myChar = echarts.init(a);
        var option = {
          series: [
            {
              // name: '安全警示',
              type: "pie",
              radius: ["40%", "80%"],
              labelLine: {
                //不显示枝条
                show: false
              },
              label: {
                show: false,
                position: "center"
              },
              color: ['#238BFF', '#FFD548', '#23C9FF','#5ce042','#007022'],//饼图颜色
              data: this.data_bzt
            }
          ]
        };
        myChar.setOption(option);
      }
    },
    bingzhangtu2() {
      //饼状图
      // var myChar = echarts.init(document.getElementById("bingtu"));
      let a = this.$refs.bingtu2;
      if (a) {
        let myChar = echarts.init(a);
        var option = {
          series: [
            {
              // name: '安全警示',
              type: "pie",
              radius: ["40%", "80%"],
              labelLine: {
                //不显示枝条
                show: false
              },
              label: {
                show: false,
                position: "center"
              },
              color: ['#23C9FF', '#238BFF', '#FFD548'],//饼图颜色
              data: this.data_bzts
            }
          ]
        };
        myChar.setOption(option);
      }
    },

    zhuzhuangtu() {
      //柱状图
      // var myChart_zz = echarts.init(document.getElementById("zz_tu"));
      let a = this.$refs.zz_tu;
      if (a) {
        let myChar = echarts.init(a);
        var option = {
          color: ["#3398DB"],
          grid: {
            left: "2%",
            right: "5%",
            bottom: "5%",
            top: "10%",
            containLabel: true
          },
          dataZoom: [
            //X轴内置滑动
            {
              type: "inside", //内置滑动，随鼠标滚轮展示
              xAxisIndex: [0],
              minSpan: 10,
              maxSpan: 30,
              start: this.dateLocation().start,
           
            end: this.dateLocation().end
            }
          ],
          xAxis: [
            {
              type: "category",
              // data: this.data_zzt_month,
              data: this.datax,
              axisTick: {
                show: false //取消刻度尺
              },
              axisLabel: {
                show: true,
                interval: 0, //设置间隔
                textStyle: {
                  color: "#535353", //字体颜色,
                  fontSize: 12
                }
              },
              axisLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              name: "",
              type: "value",

              splitLine: {
                // show: false//隐藏横线
                lineStyle: {
                  color: "#DFDFDF",
                  width: 2
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#535353", //字体颜色
                  fontSize: 12
                }
              },
              axisTick: {
                show: false //取消刻度尺
              },
              axisLine: {
                show: false //取消刻度尺
              }
            }
          ],

          series: [
            {
              // name: '直接访问',
              color: "#ffd548",
              type: "bar",
              barWidth: "20%",
              data: this.data_zzt_value //
            },
            {
              // name: '直接访问',
              color: "red",
              type: "bar",
              // barGap: 0,
              barWidth: "20%",
              data: this.data_zzt_value1 //隐患数
            },
            // {
            //   // name: '直接访问',
            //   color: "#3f98fd",
            //   type: "bar",
            //   barWidth: "20%",
            //   data: this.data_zzt_value2 //整改
            // }
          ]
        };
        myChar.setOption(option);
      }
    },
            dateLocation() {
      let month = {
        start: 0,
        end: 0,
      };
       if (this.data_zzt_value.length <= 12) {
      month.start = (100/12)*(new Date().getMonth() + 1 - 3)
      month.end = (100/12)*(new Date().getMonth() + 1)
       } else {
      month.start = (100 / 30) * new Date().getDate() + 1 - 7;
      month.end = (100 / 30) * (new Date().getDate() +1);
       }
      return month;
    },
    sequence(a, b) {
      //排序
      if (a.id > b.id) {
        return -1;
      } else if (a.id < b.id) {
        return 1;
      } else {
        return 0;
      }
    },
     queryAll(){
      
       if(this.rows == 0 || this.rows == 1|| this.rows == 3|| this.rows == 4){
var params={
         userId:this.userId,
         year:this.years,
        dwId:this.dwId,
      }
  // if (this.Type !== 0) {
  //       params.type = this.Type
  //     }
      if (this.timeType !== 1) {
        params.month = this.year
      }
      this.info(params);
    this.info2(params);
    this.zhuzhuang(params);
 this.liebiao2(params);
     }else if(this.rows==2){
        sessionStorage.setItem("isbenji",0)
       var params={
         userId:this.userId,
         year:this.years,
        
      }
  // if (this.Type !== 0) {
  //       params.type = this.Type
  //     }
      if (this.timeType !== 1) {
        params.month = this.year
      }
      this.info(params);
    this.info2(params);
    this.zhuzhuang(params);
 this.liebiao2(params);
     }
       }
  },



  mounted() {

    // var types = localStorage.getItem("yhzz") ? JSON.parse(localStorage.getItem("yhzz")) : {};
    //  this.dwId = types.shequid;
     var mcid = parseInt(this.$route.query.userid);
    // var types = parseInt(this.$route.query.type);
    this.dwId = mcid;
     let a = JSON.parse(sessionStorage.getItem('time'))
    if (a) {
    
      console.log( this.year)
       console.log( this.years)
      this.years = Number(a.years);
      this.timeType = Number(a.timeType);
        if (this.timeType== 2) {
   this.year = Number(a.year);
       }else if (this.timeType== 1){
  this.year =this.year;
       }
      this.chooseId = Number(a.chooseId);
        if (a.type) {
        this.Type = Number(a.type);
      }
     
    }
     

    //  this.queryAll();
   
  },

  created() {
     this.userId = localStorage.getItem("userId")//获取访问id
  this.time=sessionStorage.getItem("time")?JSON.parse(sessionStorage.getItem("time")):{}
   this.next();
  }
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}

.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}

.btn-add {
  position: absolute;
  right: 0.37037rem;
  font-size: 1.111111rem !important;
}
.btn-search {
  position: absolute;
    right: 0.4rem;
  top: 0.2rem;
  bottom: 0;
  width: auto !important;
  height: 100%;
  display: flex;
  align-items: center;
}
.btn-search img {
  width: 0.529629rem;
  height: 0.529629rem;
}
/* 
.btn-change {
  position: absolute;
  left: 1.537037rem;
  font-size: 0.388888rem;
  bottom: 0.444444rem;
} */
  .btn-change {
    position: absolute;
    left: 1.537037rem;
    top: 0.2rem;
    font-size: 0.388888rem !important;
    bottom: 0;
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .btn-change img {
      width: 0.529629rem;
      height: 0.529629rem;
  }
/*  */
.titles-box {
  position: fixed;
  top: 2.777778rem;
  right: 0.462963rem;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0.740741rem;
  border-radius: 0.185185rem;
  background-color: #ffffff;
  max-height: 4.5rem;
}
.titles-boxs {
  top: 1.877778rem;
  right: 0.162963rem;
  padding: 0.2rem 0.340741rem;
}
.titles-tu {
  position: absolute;
  width: 0.37037rem;
  height: 0.37037rem;
  background-color: #ffffff;
  transform: rotate(45deg);
  top: -0.138889rem;
  right: 0.277778rem;
}
.titles-text-box {
  overflow: hidden;
  overflow-y: auto;
}
.titles-text {
  padding: 0.185185rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.titles-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
  top: 0;
  left: 0;
  z-index: 999;
}
.column-box-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  width: 0.529629rem;
  height: 0.529629rem;
}
.imgs {
  width: 0.329629rem;
  height: 0.329629rem;
}
.img-ts {
  transform: rotate(180deg);
}
.main {
  padding-top: 1.8519rem;
  /* height: 100vh; */
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 1.6667rem;
  /* padding-top: 10.0008px; */
}

.main_head {
  height: 1.3889rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3704rem;
}

.img_dt {
  width: 0.3148rem;
  height: 0.4259rem;
  margin-right: 0.0556rem;
}
.lefttomm{
  padding-bottom: 0.4rem;
}
.main_head_ditu {
  display: flex;
  align-items: center;
  color: #4568ff;
  font-size: 0.3889rem;
  margin-right: 0.3704rem;
}

.main_head_font {
  font-size: 0.4444rem;
  font-weight: 400;
}

.font_36 {
  font-size: 0.3333rem;
}

.font_36_huise {
  font-size: 0.3333rem;
  color: #8e8e8e;
  margin-top: 0.1852rem;
  width: 100%;
  padding-left: 0.5rem;
}

.font_42 {
  font-size: 0.3889rem;
}
.font_43 {
  font-size: 0.3189rem;
}

/* 圆饼图 */
.main_center {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}

.main_center > div.main_center_item {
  width: 3.3333rem;
  height: 3.3333rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  padding: 0.3704rem 0;
  padding-left: 0.7407rem;
  box-sizing: border-box;
}

#bingtu {
  width: 3.3333rem;
  height: 3.3333rem;
}

.main_center_fool {
  width: 100%;
  display: flex;
}

.main_center_fool > div {
  width: 3.3333rem;
  height: 1.6667rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 0.7407rem;
}

.su {
  width: 0.1296rem;
  height: 0.463rem;
  border-radius: 1.8519rem;
  background: #238bff;
  display: inline-block;
  margin-right: 0.2704rem;
}

.su_1 {
  background: #238bff;
}

.su_2 {
  background: #23c9ff;
}

.su_3 {
  background: #ffd548;
}


.su_4 {
  background: #7264f9;
}

.su_5 {
  background: #23c9ff;
}
.su_6 {
  background: #238bff;
}

.su_7 {
  background: #ffd548;
}

.su_prent {
  display: flex;
  align-items: center;
}

.hr_s {
  padding: 0 0.3704rem;
}
.su_8 {
  background: #007022;
}

.su_9 {
  background: #5ce042;
}

.hr {
  width: 100%;
  height: 0.3704rem;
  background: #f7f7f7;
  box-sizing: border-box;
}

/* 折线图 柱张图 */
.main_fool {
  width: 100%;
  height: 4.4444rem;
  padding: 0 0.3704rem;
  display: flex;
  box-sizing: border-box;
  /* align-items: center; */
  justify-content: space-between;
  padding-top: 0.148148rem;
}

.yhzs_prent {
  width: 4.296rem;
  height: 3.5185rem;
  overflow-x: auto;
  /* padding-right: 0.1852rem; */
}

#zx_tu {
  width: 9.2593rem;
  height: 3.5185rem;
}

.main_fool > div {
  width: 48%;
}

.main_fool_title {
  font-size: 0.3889rem;
  font-weight: 400;
  /* margin-top: 0.2593rem; */
  /* margin-left: 5%; */
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}
.main_fool_title_right {
  /* display: flex; */
  align-items: center;
}

.yh_icon,
.yzg_icon{
  display: flex;
  align-items: center;

}
.yh_icon > span,
.yzg_icon > span {
  font-size: 0.2222rem;
  font-weight: 400;
}

.yh_icon > div:first-child {
  width: 0.3704rem;
  height: 0.1481rem;
  background: red;
}
.yzg_icon > div:first-child {
  width: 0.3704rem;
  height: 0.1481rem;
  background: #ffd548;
}



/* 柱状图 */
.xcpc_prent {
  width: 4.296rem;
  height: 3.5185rem;
  /* overflow-x: auto; */
  /* padding-right: 0.1852rem; */
}

#zz_tu {
  width: 100%;
  height: 3.5185rem;
}

.main_fool_su {
  width: 1px !important;
  height: 3.6111rem;
  border-right: 1px solid #ddd;
}

.mian_list {
  width: 100%;
  display: flex;
  padding: 0.2778rem 0;
  flex-wrap: wrap;
}

.mian_list > div {
  width: 50%;
  padding-left: 0.3704rem;
  padding-right: 0.1852rem;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
}

.mian_list > div:nth-child(2n) {
  border-right: none;
  padding-left: 0.1852rem;
}

.item {
  display: flex;
  justify-content: space-between;
  padding-left: 0.3704rem;
  padding-right: 0.1852rem;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  /* border-top: 1Px solid #ddd; */
  margin-bottom: -1px;
  height: 1.3889rem;
  align-items: center;
}

.item > div {
  font-size: 0.3333rem;
}

.item_active {
  border: none;
}
.tongji {
  display: flex;
}
.font_shuzi {
  font-size: 0.31rem;

  color: #8e8e8e;
  margin-top: 0.1852rem;
  width: 100%;
  /* padding-left: 0.5rem; */
}
.yh_zts {
 display: flex;
}
    /* 底部列表 */
  .main_footer {
  /* position: fixed; */
  width: 100%;
  background-color: #fff;
  z-index: 999;
}
.main-list {
  display: flex;
  justify-content: space-around;
  padding-top: 0.425926rem;
  padding-bottom: 0.425926rem;
  border-bottom: 1px solid #aaaaaa;
}

/* .index {
    padding-top: 0.8rem;
  } */

.main-wh {
  width: 20%;
  text-align: center;
  color: #666666;
  font-size: 0.388888rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wh-col {
  color: #748bfd;
}
.sd {
  color: #666666;
}
</style>
